<template>
	<view class="container">
		<!-- 状态栏（绿色） -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 自定义导航栏（绿色背景） -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<!-- 左侧返回箭头 -->
				<view class="navbar-left" @click="handleBack">
					<uni-icons type="left" size="20" color="#FFFFFF"></uni-icons>
				</view>
				<!-- 中间标题 -->
				<view class="navbar-title">导入数据</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
			<!-- 选项列表 -->
			<view class="options-list">
				<!-- 导入我们自家的备份文件 -->
				<view class="option-item" @click="handleImportOwn">
					<view class="option-info">
						<text class="option-title">导入我们自家的备份文件</text>
					</view>
					<uni-icons type="right" size="14" color="#CCCCCC"></uni-icons>
				</view>

				<!-- 导入其他第三方平台数据 -->
				<view class="option-item" @click="handleImportThirdParty">
					<view class="option-info">
						<text class="option-title">导入其他第三方平台数据</text>
					</view>
					<uni-icons type="right" size="14" color="#CCCCCC"></uni-icons>
				</view>
			</view>

			<!-- 底部指示器 -->
			<view class="home-indicator-wrapper">
				<view class="home-indicator"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 20;
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			handleImportOwn() {
				// TODO: 实现导入自家备份文件
				// uni.showToast({
				// 	title: '功能开发中',
				// 	icon: 'none'
				// });
			},
			handleImportThirdParty() {
				// TODO: 实现导入第三方平台数据
				// uni.showToast({
				// 	title: '功能开发中',
				// 	icon: 'none'
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	// 状态栏（绿色）
	.status-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #008D57;
		z-index: 1001;
		width: 100%;
	}

	// 自定义导航栏（绿色背景）
	.custom-navbar {
		background-color: #008D57;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		width: 100%;
	}

	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		color: #FFFFFF;
		position: relative;
	}

	.navbar-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}

	.navbar-title {
		font-size: 34rpx;
		font-weight: 500;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		letter-spacing: 0.5rpx;
	}

	// 主内容区
	.main-content {
		flex: 1;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-bottom: 40rpx;
	}

	.options-list {
		flex: 1;
		padding: 32rpx;
	}

	.option-item {
		display: flex;
		align-items: center;
		padding: 32rpx;
		background-color: #F5F5F5;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		cursor: pointer;
		transition: opacity 0.2s;
		
		&:active {
			opacity: 0.7;
		}
	}

	.option-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.option-title {
		font-size: 30rpx;
		color: #333333;
		font-weight: 400;
		line-height: 1.2;
	}

	.home-indicator-wrapper {
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-indicator {
		width: 80rpx;
		height: 4rpx;
		background-color: #CCCCCC;
		border-radius: 2rpx;
	}
</style>

